<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/records">游戏列表</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          游戏详情
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <a-table
          size="middle"
          rowKey="id"
          :columns="columns"
          :data-source="recordDetailList"
          :pagination="false"
      >
        <template slot="player" slot-scope="text, record">
          <div>
            {{
              record.player.player
            }}
            <a-tag color="#87d068" v-if="record.score === 2">mvp
            </a-tag>
          </div>
        </template>
        <template slot="action" slot-scope="text, record">
          <div>
            <a-tag :color="record.score === 0 ? 'red' : 'green'">{{
                record.score === 0 ? '失败' : '胜利'
              }}
            </a-tag>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
export default {

  name: 'recordsDetail',

  data () {
    return {
      columns: [
        {
          title: '游戏记录id',
          dataIndex: 'record_id'
        },
        {
          title: '玩家id',
          dataIndex: 'player_id'
        },
        {
          title: '玩家姓名',
          dataIndex: 'player',
          scopedSlots: { customRender: 'player' }
        },
        {
          title: '玩家角色',
          dataIndex: 'player_role'
        },
        {
          title: '角色类型',
          dataIndex: 'role_type'
        },
        {
          title: '对局得分',
          dataIndex: 'score'
        },
        {
          title: '对局结果',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      recordDetailList: []
    }
  },

  mounted () {
    this.first()
  },

  methods: {
    first () {
      this.$http.get(`api/admin/records/${this.$route.params.id}`).then((result) => {
        this.recordDetailList = result
      }, (error) => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>